探索 Vue.js 循環動效，為您的網頁注入獨特的貓咪魅力，感受每一刻的‘MADE WITH LOVE’。

哈囉各位，今天我們要一起來揭開文字循環特效的神秘面紗！

你有想過嗎？簡單的文字，經過巧妙設計，就能不斷環繞著視線，營造出一種無法忽視的節奏感。

這次，我們將透過 Vue.js 實現一個令人難以移開目光的循環文字動效，再加上一隻萌萌的貓咪，就能讓整個頁面活起來！
讓愛的心意和貓咪的俏皮感圍繞著你！
讓我們的文字不再是靜止的符號，而是充滿動感與魅力的視覺亮點。

那就跟著我一起開始這段貓咪奇幻之旅吧！

循環動效的定義 （Loop Animation）

循環動效（Loop Animation）是指一種不間斷重複播放的動畫效果。
它可以是簡單的元素旋轉、擺動，也可以是複雜的圖形變化。
這類動畫可以在背景、邊框、圖示等元素中反覆執行，目的是讓網頁看起來更具動感，增強視覺吸引力。
通常循環動效會被用於標示重點內容、提供視覺焦點，或是為了打造獨特的品牌風格。

設計思維與流程

在設計循環動效時，我們的目標是透過不斷重複的動畫效果，來吸引使用者的視線，讓頁面更加生動有趣。
就如同上圖中的「Made with Love」框架設計，這些細膩的循環動效能夠為內容增添一層吸引力。

本文將結合先前的動效設計流程，深入探討循環動效的應用技巧，並標示出相關程式碼段落，讓你能輕鬆上手這些精彩又可愛的視覺互動效果。

• 定義動效目標：首先，確立循環動效的目標是引導使用者視覺焦點，並提升頁面互動感。這種動效特別適合用於展示品牌價值、強調重點內容或吸引點擊行為。

• 選擇合適的循環動效：篩選適合的循環動效類型，例如旋轉、閃爍、擺動等。這些動效應該以微妙的方式增加視覺吸引力，且不會過度妨礙使用者。

核心循環動效設計：文字旋轉效果

在設計循環動效時，我們會特別注意以下幾個關鍵要素：

• 低干擾，高質感：動效的頻率和強度要拿捏得當，讓它們變得柔和不刺眼，不會干擾使用者的操作體驗，但又能巧妙吸引目光。
• 聚焦重點，視覺亮點：循環動效的精髓在於幫助內容脫穎而出，特別是在強調品牌元素或重要訊息時，這樣的設計更能讓重點自然凸顯。
• 適可而止，點到為止：動效雖好，但也要恰如其分地運用。過度使用反而可能讓使用者視覺疲勞，適度的點綴才能達到最佳效果。

這些小技巧，能讓你的循環動效在保持活力的同時，又不失專業的質感！

• 完整程式碼

<script setup lang="ts">
import { ref } from 'vue';

// 在這裡定義你的字元，這些字元可以動態調整
const characters = ref([
  '❤', '', 'E', 'V', 'O', 'L', '', 'H', 'T', 'I', 'W', '', 'E', 'D', 'A', 'M', '', '❤',
  '', 'E', 'V', 'O', 'L', '', 'H', 'T', 'I', 'W', '', 'E', 'D', 'A', 'M', '', '❤',
  '', 'E', 'V', 'O', 'L', '', 'H', 'T', 'I', 'W', '', 'E', 'D', 'A', 'M',
]);


const pawPrintSrc = '/images/pawprint.png';
const addPawPrint = (event: MouseEvent) => {
  // 腳印圖片
  const pawPrint = document.createElement('img');
  pawPrint.src = pawPrintSrc;
  pawPrint.classList.add('paw-print');

  // 設置腳印座標
  pawPrint.style.position = 'absolute';
  pawPrint.style.left = `${event.pageX - 15}px`; 
  pawPrint.style.top = `${event.pageY - 15}px`;
  pawPrint.style.width = '30px'; // 腳印大小
  pawPrint.style.height = '30px';
  pawPrint.style.pointerEvents = 'none'; // 避免脚印被點擊

  // 蓋腳印
  document.body.appendChild(pawPrint);

  // 移除腳印 2 秒
  setTimeout(() => {
    pawPrint.remove();
  }, 2000); 
};

</script>

<template>
  <div @click="addPawPrint"
    class="h-screen flex items-center 
    bg-[url('/images/grid-backgroud.jpeg')] bg-cover">
    <div class="frame
        w-[80vw] h-[80vw] max-w-[400px] max-h-[400px]
        mx-auto border-2 border-[#fbfbfb] relative
        transition-all ease duration-300
        bg-[url('./images/cat.jpeg')] bg-center bg-no-repeat bg-cover
        cursor-pointer 
        ">
      <span v-for="(char, index) in characters" :key="index"
        class="text-[22px] inline-block text-center w-[22px] absolute animate-[frameMove_10s_linear_infinite] transition-all ease-linear duration-10000"
        :style="{ animationDelay: `calc(0.2s * ${index + 1})` }">
        {{ char }}
      </span>
    </div>

  </div>
</template>


<style>
.frame {
  box-shadow: inset 0 0 0 20px white;
}

.frame:hover {
  box-shadow: inset 0 0 0 0 white;
}

@keyframes frameMove {
  0% { top: 0; left: 0; transform: rotate(0deg); }
  24% { top: 0; left: 100%; transform: rotate(0deg); }
  25% { transform: rotate(90deg); }
  49% { top: 100%; left: 100%; transform: rotate(90deg); }
  50% { transform: rotate(180deg); }
  74% { top: 100%; left: 0%; transform: rotate(180deg); }
  75% { transform: rotate(270deg); }
  99% { top: 0%; left: 0%; transform: rotate(270deg); }
  100% { transform: rotate(360deg); }
}

</style>

程式碼片段講解

這段程式碼結合了 Vue.js 和 UnoCSS，實現了一個視覺效果獨特的循環特效，並在點擊時添加了互動元素——貓咪腳印。
以下是對各個主要功能的詳細講解：

1. 循環文字特效

循環文字特效是這裡的核心部分，通過一系列動畫讓文字在圖片框架四周不斷旋轉，吸引使用者目光。

• 字元定義：

  const characters = ref([
    '❤', '', 'E', 'V', 'O', 'L', '', 'H', 'T', 'I', 'W', '', 'E', 'D', 'A', 'M', '', '❤',
    '', 'E', 'V', 'O', 'L', '', 'H', 'T', 'I', 'W', '', 'E', 'D', 'A', 'M', '', '❤',
    '', 'E', 'V', 'O', 'L', '', 'H', 'T', 'I', 'W', '', 'E', 'D', 'A', 'M',
  ]);
  

  這裡定義了需要循環顯示的字元，characters 是一個陣列，每個字元將被逐一放置在圖片框的四周，形成環繞的效果。

• 循環動畫：

  <span v-for="(char, index) in characters" :key="index"
    class="text-[22px] inline-block text-center w-[22px] absolute animate-[frameMove_10s_linear_infinite] transition-all ease-linear duration-10000"
    :style="{ animationDelay: `calc(0.2s * ${index + 1})` }">
    {{ char }}
  </span>
  

  每個字元會根據其索引應用不同的 animationDelay，讓整體效果看起來像是文字在不斷流動。
  動畫名稱為 frameMove，持續時間 10s，以 linear 模式無限循環，創造出持續而平滑的旋轉特效。

• 動畫效果設計：

  @keyframes frameMove {
    0% { top: 0; left: 0; transform: rotate(0deg); }
    24% { top: 0; left: 100%; transform: rotate(0deg); }
    25% { transform: rotate(90deg); }
    49% { top: 100%; left: 100%; transform: rotate(90deg); }
    50% { transform: rotate(180deg); }
    74% { top: 100%; left: 0%; transform: rotate(180deg); }
    75% { transform: rotate(270deg); }
    99% { top: 0%; left: 0%; transform: rotate(270deg); }
    100% { transform: rotate(360deg); }
  }
  

這段 @keyframes frameMove 的動效設計是為了讓文字沿著框架四周順時針旋轉。
動效分為四個主要階段，分別在框架的四個角落停留短暫時間，每次旋轉 90 度，讓文字看起來像是在邊框上「走動」。
這種設計能產生平滑且持續的循環效果，營造出不斷流動的視覺感，

2. 點擊後的互動 - 貓咪腳印

當你點擊頁面的任何位置時，貓咪腳印會瞬間出現在點擊處，彷彿留下了俏皮的足跡，

• 補充貓咪腳印的素材資源

• Search results for Cat - Flaticon - Page 3

• 腳印生成樣式與邏輯：

  const pawPrintSrc = '/images/pawprint.png';
  const addPawPrint = (event: MouseEvent) => {
    const pawPrint = document.createElement('img');
    pawPrint.src = pawPrintSrc;
    pawPrint.classList.add('paw-print');
    pawPrint.style.position = 'absolute';
    pawPrint.style.left = `${event.pageX - 15}px`;
    pawPrint.style.top = `${event.pageY - 15}px`;
    pawPrint.style.width = '30px';
    pawPrint.style.height = '30px';
    pawPrint.style.pointerEvents = 'none';
    document.body.appendChild(pawPrint);
  
    setTimeout(() => {
      pawPrint.remove();
    }, 2000);
  };
  

  點擊事件觸發後，程式會動態創建一個 img 元素，並將貓咪腳印圖片 (pawprint.png) 設置為圖片來源。
  腳印將根據滑鼠點擊位置顯示，並在 2 秒後自動移除，確保頁面不會被多餘的腳印堆積。

• 互動優化：

  腳印的大小、位置、出現及消失的效果皆經過調整，以達到視覺上精緻、自然的效果。
  腳印本身不會干擾使用點擊行為，這些細節提升了整體互動的流暢性和趣味性。

3. 整體設計與應用場景

這樣的設計不僅僅是動效的展示，更是互動體驗的升級。
透過 Vue.js 和 UnoCSS 的結合，我們能夠輕鬆地為網頁加入活潑且具吸引力的視覺效果，讓頁面不再單調乏味。
這樣的循環動效特別適合用於活動頁、品牌展示和產品宣傳中，幫助內容脫穎而出，讓使用者願意多停留幾秒，去感受這份充滿趣味的創意設計。

小結語

今天的貓咪腳印循環動效是不是超級可愛？
透過簡單的 Vue.js 設計，我們輕鬆地讓網頁充滿生氣，像是給畫面注入了貓咪的靈魂！
無論是俏皮的腳印還是流轉的文字，這些小巧思都能讓你的網站瞬間活過來。

希望你在實作過程中玩得開心，也期待你的創意能讓網頁更加與眾不同！
下一次，讓我們繼續一起探索更多有趣的動效魔法吧！喵～